<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        box-sizing: border-box;
      }
      body {
        padding: 10px;
      }
      .flex {
        display: flex;
        align-items: center;
      }
      input {
        text-align: center;
        border: 1px solid #888;
        border-radius: 5px;
        height: 26px;
      }
      .c2 {
        margin-bottom: 20px;
        padding-bottom: 10px;
        border-bottom: 1px solid #ccc;
      }
      .c2 input {
        width: 50%;
      }
      .c2 .b5 {
        color: #999;
        margin-top: 5px;
      }
      .c5 .b1 {
        margin-bottom: 10px;
        padding-bottom: 10px;
        border-bottom: 1px solid #ccc;
      }
      .c5 .b3 div {
        margin-top: 5px;
        margin-right: 20px;
        background: #555;
        color: #fff;
        padding: 3px 15px;
        border-radius: 3px;
        font-size: 14px;
        cursor: pointer;
      }
      .c10 .b2 {
        width: 50%;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div class="c2">
        <div class="flex">
          <div>需要操作的文件夹路径：</div>
          <input type="text" v-model="formData.dir" />
        </div>
        <div class="b5">
          可以是相对路径：./file/ 或者 绝对路径：D:\新建文件夹
        </div>
      </div>
      <div class="c5">
        <div class="b1">
          <div class="b2">文件上传接口：{{domain}}/upload</div>
        </div>
        <div class="b1">
          <div class="b2">将文件夹列表输出到【./file/data.js】文件</div>
          <div class="b3 flex">
            <div @click="request('/writeFile')">确定</div>
          </div>
        </div>
        <div class="b1">
          <div class="b2">
            【{{formData.dir}}】 文件夹下的json语言包输出
            【./translations.xlsx】文件
          </div>
          <div class="b3 flex">
            <div @click="request('/outputExecl')">确定</div>
          </div>
        </div>
        <div class="b1">
          <div class="b2">
            语言包【./translations.xlsx】转json文件放到【./file/】目录下
          </div>
          <div class="b3 flex">
            <div @click="request('/outputJson')">确定</div>
          </div>
        </div>
        <div class="b1">
          <div class="b2">
            批量文件名前面拼接 <input v-model="formData.prefix" />
          </div>
          <div class="b3 flex">
            <div @click="request('/renamePrefix','preview')">预览</div>
            <div @click="request('/renamePrefix','rename')">确定</div>
          </div>
        </div>
        <div class="b1">
          <div class="b2">
            批量修改后缀为
            <input v-model="formData.suffix" style="width: 50px" />
          </div>
          <div class="b3 flex">
            <div @click="request('/renameSuffix','preview')">预览</div>
            <div @click="request('/renameSuffix','rename')">确定</div>
          </div>
        </div>
        <div class="b1">
          <div class="b2">
            批量重命名文件为
            <input v-model="formData.newNameStart" />，拼上序号从
            <input v-model="formData.serialNumber" style="width: 50px" />
            开始，拼上结尾名称
            <input v-model="formData.newNameEnd" placeholder="选填" />
          </div>
          <div class="b3 flex">
            <div @click="request('/renameNumber','preview')">预览</div>
            <div @click="request('/renameNumber','rename')">确定</div>
          </div>
        </div>
      </div>
      <div class="c10">
        <div>{{resMsg}}</div>
        <div>{{JSON.stringify(resData)}}</div>
        <div class="b1 flex" v-for="(v,i) in list" :key="i">
          <div class="b2">{{v.oldName}}</div>
          <div class="b2">{{v.newName}}</div>
        </div>
        <div class="b1" v-for="(v,i) in langList" :key="i">
          <div class="flex">
            <div class="b2" v-for="(item,index) in v" :key="index">
              {{item}}
            </div>
          </div>
        </div>
      </div>
    </div>
    <script src="./vue.min.js"></script>
    <script>
      new Vue({
        el: "#app",
        data: {
          domain: "",
          list: [],
          resData: "",
          langList: [],
          formData: {},
          resMsg: "",
        },
        mounted() {
          this.domain = window.location.origin;
          const formData = localStorage.getItem("formData");
          this.formData = formData
            ? JSON.parse(formData)
            : {
                dir: "D:/\web/\AresCloud-V3/\locale/\新建文件夹",
                prefix: "2025",
                suffix: ".mp4",
                newNameStart: "赴山海.2025.E",
                newNameEnd: "",
                serialNumber: 1,
              };
        },
        methods: {
          request(url, mode) {
            localStorage.setItem("formData", JSON.stringify(this.formData));
            fetch(url, {
              method: "POST",
              headers: {
                "Content-Type": "application/json",
              },
              body: JSON.stringify({
                ...this.formData,
                mode,
              }),
            })
              .then((response) => response.json())
              .then((res) => {
                this.resMsg = res.msg;
                if (url === "/outputExecl") {
                  this.langList = res.data;
                } else if (url === "/writeFile") {
                  this.resData = res.data;
                } else {
                  this.list = res.data;
                }
              });
          },
        },
      });
    </script>
  </body>
</html>
